<!-- Labs -->

<template>
  <n-h1>Labs</n-h1>
  <n-collapse>
    <n-collapse-item title="Get API">
      <n-form ref="formRef" :model="formValue"
              inline label-width="80" size="large">
        <n-form-item-row label="Request path" path="request">
          <n-input v-model:value="formValue.request" />
        </n-form-item-row>
        <n-form-item-row label="Reply" path="replyJson">
          <n-input v-model:value="formValue.replyJson" type="textarea" rows="10" />
        </n-form-item-row>
        <n-form-item-row>
          <n-button @click="doSubmit">
            Submit
          </n-button>
        </n-form-item-row>
      </n-form>
      <n-space>
        <n-log :log="formValue.replyJson" language="javascript" />
      </n-space>
    </n-collapse-item>
    <n-collapse-item title="SelectCharPopup + CharIcon">
      <n-tooltip>
        <template #trigger>
          <n-button text @click="showSelChar = true">
            <char-icon size="128" :charId="selected.charId" />
          </n-button>
        </template>
        选择干员
      </n-tooltip>
      <char-select-popup v-model:show="showSelChar" v-model:selected="selected"/>
      {{ selected }}
    </n-collapse-item>
    <n-collapse-item title="CharAttrSelect">
      <char-attr-select v-model:attr="charAttr" />
    </n-collapse-item>
    <n-collapse-item title="EnemySelect">
      <enemy-select v-model:attr="enemyAttr" />
    </n-collapse-item>
    <n-collapse-item title="RaidBuffSelect">
      <raid-buff-select v-model:attr="raidBuff" />
    </n-collapse-item>
    <n-collapse-item title="DpsCalc">
      <dps-calc v-model:dps="dps" :character="charAttr" :enemy="enemyAttr" :raidBuff="raidBuff" />
    </n-collapse-item>
    <n-collapse-item title="DpsResult">
      <dps-result debug :dps="dps" />
    </n-collapse-item>
  </n-collapse>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import { user } from '../services'
import { api } from '../utils'
import { FormInst, NCollapse, NCollapseItem } from 'naive-ui'
import { CharSelectPopup, CharIcon, CharAttrSelect,
         EnemySelect, RaidBuffSelect, DpsCalc, DpsResult } from '../components' 

const formRef = ref<FormInst | null>(null)
const formValue = ref({
  request: '',
  reply: '',
  replyJson: ''
})
const showSelChar = ref(false)
const selected = ref({})
const charAttr = ref({})
const enemyAttr = ref({})
const raidBuff = ref({})
const dps = ref({})

const handleStatus = (status: number) => async () => {
  await api.get('labs/status/' + status.toString()).json()
}

const doSubmit = async (e: MouseEvent) => {
  console.log(formValue.value.request)
  // Promise<Response> -> Promise<Object> -> Object
  const result = await api.get(formValue.value.request).json()
  //console.log(result)
  formValue.value.reply = result
  formValue.value.replyJson = JSON.stringify(result, null, 2)
}
</script>

<style scoped>
.n-input {
  width: 600px;
}
</style>